<%@page import="com.teach.vo.LoginUser"%>
<%@page import="cn.hutool.extra.servlet.ServletUtil"%>
<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax</title>
		<jsp:include page="/head.jsp"/>
	</head>
	<body>
	
		
			
		<h1>注册</h1>
			<form name="regForm" action="reg-1.let" method="post"
                data-bv-message="验证不通过"
                data-bv-feedbackicons-valid="fa fa-check"
                data-bv-feedbackicons-invalid="fa fa-times"
                data-bv-feedbackicons-validating="fa fa-refresh"
            >
							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>用户名</label>
								<div class="col-sm-9">
									<input
										name="userName" type="text" placeholder="由3到20个单词字符组成"
										 class="form-control" value=""
                     data-bv-trigger="keyup"
                      data-bv-notempty-message="用户名不能为空"
                     pattern="^[a-zA-Z]\w{2,19}$" data-bv-regexp-message="用户名必须由字母开始的3-20个单词字符组成"
                     data-bv-different data-bv-different-field="userPassword" data-bv-different-message="用户名不能和密码一样"
                     >
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>密码</label>
								<div class="col-sm-9">
									<input name="userPassword" type="password"
										placeholder="由3到20个字符组成"
										class="form-control" value=""
                    
                    data-bv-trigger="keyup"
                     data-bv-notempty-message="密码不能为空"
                    pattern="^.{3,20}$" data-bv-regexp-message="密码必须由3-20个字符组成"
                    data-bv-identical data-bv-identical-field="userPasswordConfirm" data-bv-identical-message="两次输入的密码必须一致"
                    data-bv-different data-bv-different-field="userName" data-bv-different-message="密码不能和用户名一样"
                    >
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>密码确认</label>
								<div class="col-sm-9">
									<input  name="userPasswordConfirm"
										type="password" placeholder="两次输入密码一致" class="form-control"
										value=""
                    data-bv-trigger="keyup"
                     data-bv-notempty-message="密码确认不能为空"
                    data-bv-identical data-bv-identical-field="userPassword" data-bv-identical-message="两次输入的密码必须一致"
                    data-bv-different data-bv-different-field="userName" data-bv-different-message="密码不能和用户名一样"
                    >
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>昵称</label>
								<div class="col-sm-9">
									<input  name="userNickname" type="text"
										 placeholder="由2到8个汉字组成"
										 class="form-control" value=""
                     data-bv-trigger="keyup"
                      data-bv-notempty-message="昵称不能为空"
                     pattern="^[\u4100-\u9fa5]{2,8}$" data-bv-regexp-message="昵称必须由2-8个中文字符组成"
                     >
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>性别</label>
								<div class="col-sm-9">
									<input type="radio" name="userSex" value="true"
										checked="checked">男 <input type="radio" name="userSex"
										value="false">女
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">出生日期</label>
								<div class="col-sm-9">
									<input type="date" name="userBrithdate" class="form-control"
										style="width: auto;" />
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">电话</label>
								<div class="col-sm-9">
									<input name="userPhone" type="text" placeholder="有11位数字组成"
										class="form-control" value="">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">邮箱</label>
								<div class="col-sm-9">
									<input name="userEmail" type="text" placeholder="电子邮箱地址"
										class="form-control" value="">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">QQ</label>
								<div class="col-sm-9">
									<input name="userQq" type="text" placeholder="QQ号码"
										class="form-control" value="">
								</div>
							</div>

							<div class="form-group row">
								<div class="col-sm-9 offset-sm-3">
									<button class="btn btn-primary">
										<i class="fa fa-user-plus mr-1"></i> 注册
									</button>
									<a href="./login.jsp" class="btn btn-info">登录</a> <a
										href="./" class="btn btn-link ml-4">首页</a>
								</div>
							</div>
						</form>
<pre id="paramShow">

</pre>
<script type="text/javascript">
	var paramShow = document.querySelector("#paramShow");
	var regForm = document.forms.regForm;
	regForm.onsubmit = function(){
		let formData = new FormData(regForm);
		paramShow.textContent="FormData:"
		paramShow.textContent += "\nuserName="+formData.get("userName");
		formData.forEach((value,name)=>{
			paramShow.textContent += "\n"+name+"="+value;
		});
		paramShow.textContent += "\n\nURLSearchParams:"
		let p1 = new URLSearchParams();
		p1.append("a","aa");
		p1.append("b","中文");
		paramShow.textContent += "\n"+p1.toString();

		paramShow.textContent += "\n"+new URLSearchParams(new FormData(regForm)).toString();
		return false;
	}
</script>
	</body>
</html>
